<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>芜湖市公共资源交易中心 · 大屏看板</title>
    <style>
        :root {
            --bg: #0b1220;
            --card: #101a2b;
            --card-2: #0f1a2a;
            --primary: #14b8a6;
            --primary-soft: rgba(20,184,166,.25);
            --text: #dbeafe;
            --muted: #8ba3c7;
            --accent: #7c3aed;
            --warn: #f59e0b;
            --danger: #ef4444;
            --ok: #22c55e;
            --chip-bg: #0f2236;
            --border: rgba(148,163,184,.15);
            --glow: 0 0 22px rgba(20,184,166,.25), 0 0 60px rgba(124,58,237,.15);
        }

        * {
            box-sizing: border-box;
        }

        html, body {
            height: 100vh;
            margin: 0;
            padding: 0;
            overflow: hidden; /* 隐藏滚动条，实现全屏 */
        }

        body {
            color: var(--text);
            background: radial-gradient(1200px 800px at 0% 0%, rgba(124,58,237,.12), transparent 60%), radial-gradient(1000px 700px at 100% 0%, rgba(20,184,166,.15), transparent 55%), linear-gradient(180deg, #0b1220 0%, #0a1220 100%);
            background-color: var(--bg);
            font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif;
            line-height: 1.4;
        }

        .wrap {
            height: 100vh;
            display: flex;
            flex-direction: column;
            padding: 16px;
        }

        /* 顶部标题栏 */
        .header {
            position: relative;
            display: flex;
            justify-content: center; /* 水平居中标题块 */
            align-items: flex-end;
            margin-bottom: 16px;
            flex-shrink: 0;
            gap: 12px;
        }

            /* 标题与副标题整体居中 */
            .header > div:first-child {
                text-align: center;
            }

            /* 右侧状态与时间固定在右下角，不影响居中 */
            .header .meta {
                position: absolute;
                right: 0;
                bottom: 0;
            }

        .title {
            font-size: 28px;
            font-weight: 700;
            letter-spacing: .5px;
            background: linear-gradient(90deg, #e2e8f0, #a5b4fc 60%, #5eead4);
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
            text-shadow: 0 8px 24px rgba(94,234,212,.12);
        }

        .subtitle {
            font-size: 13px;
            color: var(--muted);
            opacity: .9;
        }

        .meta {
            display: flex;
            align-items: center;
            gap: 10px;
            color: var(--muted);
            font-size: 13px;
        }

        .badge {
            padding: 4px 10px;
            background: linear-gradient(90deg, rgba(20,184,166,.14), rgba(124,58,237,.14));
            border: 1px solid var(--border);
            border-radius: 999px;
            box-shadow: var(--glow);
        }

        /* 容器栅格：两行两列，占满剩余空间 */
        .grid {
            flex: 1;
            display: grid;
            grid-template-columns: 1.1fr .9fr;
            grid-template-rows: 1fr 1fr;
            gap: 16px;
            min-height: 0; /* 重要：允许子元素缩小 */
        }

        /* 卡片 */
        .card {
            height: 100%;
            background: linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.01)), var(--card);
            border: 1px solid var(--border);
            border-radius: 14px;
            box-shadow: var(--glow);
            overflow: hidden;
            display: flex;
            flex-direction: column;
            min-height: 0;
        }

        .card-header {
            padding: 12px 16px 8px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            border-bottom: 1px solid var(--border);
            background: linear-gradient(180deg, rgba(124,58,237,.06), rgba(20,184,166,.05) 60%, transparent);
            flex-shrink: 0;
        }

        .card-title {
            font-weight: 600;
            letter-spacing: .25px;
        }

        .card-actions {
            display: flex;
            gap: 8px;
            align-items: center;
        }

        .btn {
            font-size: 12px;
            padding: 6px 10px;
            color: var(--text);
            background: #0d1726;
            border: 1px solid var(--border);
            border-radius: 8px;
            cursor: pointer;
        }

            .btn.primary {
                background: linear-gradient(90deg, rgba(20,184,166,.18), rgba(124,58,237,.18));
                border-color: rgba(148,163,184,.25);
            }

        .card-body {
            flex: 1;
            padding: 14px;
            overflow: hidden;
            display: flex;
            flex-direction: column;
            gap: 12px;
            min-height: 0;
        }

        /* 区块一：项目统计（四指标） */
        .kpi-wrap {
            display: grid;
            grid-template-columns: 260px 1fr; /* 左侧单列 + 右侧网格 */
            gap: 12px;
            height: 100%;
            align-items: stretch;
        }

        .kpi-left {
            height: 100%;
        }

            .kpi-left .kpi {
                height: 100%;
                display: flex;
                justify-content: center;
            }

        .kpi-right {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 12px;
            height: 100%;
        }

        .kpi {
            background: linear-gradient(180deg, rgba(20,184,166,.06), rgba(124,58,237,.05));
            border: 1px solid var(--border);
            border-radius: 12px;
            padding: 16px;
            display: flex;
            flex-direction: column;
            gap: 8px;
            justify-content: center;
        }

            .kpi .label {
                color: var(--muted);
                font-size: 13px;
            }

            .kpi .value {
                font-size: 32px;
                font-weight: 800;
                letter-spacing: .5px;
                background: linear-gradient(90deg, #e2e8f0, #93c5fd 60%, #5eead4);
                -webkit-background-clip: text;
                background-clip: text;
                color: transparent;
                text-shadow: 0 6px 18px rgba(20,184,166,.18);
            }

            .kpi .delta {
                font-size: 12px;
                color: var(--muted);
            }

        /* 区块二：项目列表 - 自动滚动 */
        .table {
            width: 100%;
            border-collapse: collapse;
            font-size: 13px;
        }

            .table th, .table td {
                padding: 12px 10px;
                border-bottom: 1px dashed var(--border);
                white-space: nowrap;
            }

            .table th {
                color: #9fb6d8;
                font-weight: 600;
                position: sticky;
                top: 0;
                background: linear-gradient(180deg, rgba(16,26,43,1) 0%, rgba(16,26,43,.9) 100%);
                z-index: 1;
            }

        /* 场地分布表格：放大字号并对齐表头与数字列 */
        .venue-table {
            font-size: 18px;
        }

            .venue-table th, .venue-table td {
                padding: 20px 18px;
            }

                .venue-table th:first-child, .venue-table td:first-child {
                    text-align: left;
                }

                .venue-table th:nth-child(n+2), .venue-table td:nth-child(n+2) {
                    text-align: right;
                }

                .venue-table td.mono {
                    font-variant-numeric: tabular-nums;
                    font-feature-settings: "tnum";
                }

            .venue-table thead th {
                font-weight: 700;
            }

        .scroll {
            overflow: hidden; /* 隐藏滚动条 */
            border: 1px solid var(--border);
            border-radius: 10px;
            height: 100%;
            background: linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.01));
            position: relative;
        }

        .scroll-content {
            animation: autoScroll 20s linear infinite;
        }

        @keyframes autoScroll {
            0% {
                transform: translateY(0);
            }

            100% {
                transform: translateY(-50%);
            }
        }

        .chip {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            padding: 3px 8px;
            border-radius: 999px;
            font-size: 12px;
            font-weight: 600;
            letter-spacing: .25px;
            background: var(--chip-bg);
            border: 1px solid var(--border);
        }

            .chip.ok {
                color: var(--ok);
                border-color: rgba(34,197,94,.35);
                background: rgba(34,197,94,.08);
            }

            .chip.warn {
                color: var(--warn);
                border-color: rgba(245,158,11,.35);
                background: rgba(245,158,11,.08);
            }

            .chip.err {
                color: var(--danger);
                border-color: rgba(239,68,68,.35);
                background: rgba(239,68,68,.08);
            }

            .chip.info {
                color: #60a5fa;
                border-color: rgba(96,165,250,.35);
                background: rgba(96,165,250,.08);
            }

        /* 区块三：场地分布 */
        .legend {
            display: flex;
            gap: 10px;
            flex-wrap: wrap;
            color: var(--muted);
            font-size: 12px;
        }

            .legend .dot {
                width: 10px;
                height: 10px;
                border-radius: 2px;
                display: inline-block;
                margin-right: 6px;
            }

        .dot.blue {
            background: #60a5fa;
        }

        .dot.purple {
            background: #a78bfa;
        }

        .dot.teal {
            background: #14b8a6;
        }

        /* 区块四：专家签到占比（纯 CSS 环形图） */
        .donut-wrap {
            display: grid;
            grid-template-columns: 260px 1fr;
            gap: 16px;
            align-items: center;
            height: 100%;
        }

        .donut {
            --p1: 46; /* 已签到（%） */
            --p2: 34; /* 待签到（%） */
            --p3: 20; /* 请假（%） */
            width: 240px;
            height: 240px;
            border-radius: 50%;
            background: conic-gradient( #22c55e 0 calc(var(--p1)*1%), #f59e0b 0 calc((var(--p1)+var(--p2))*1%), #ef4444 0 100% );
            position: relative;
            border: 1px solid var(--border);
            box-shadow: var(--glow);
        }

            .donut::after {
                content: "";
                position: absolute;
                inset: 18px;
                border-radius: 50%;
                background: linear-gradient(180deg, rgba(16,26,43,1), rgba(16,26,43,.92)), var(--card-2);
                border: 1px solid var(--border);
            }

        .donut-center {
            position: absolute;
            inset: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-direction: column;
            font-weight: 700;
            gap: 4px;
            text-align: center;
        }

            .donut-center .big {
                font-size: 26px;
                background: linear-gradient(90deg, #e2e8f0, #93c5fd);
                -webkit-background-clip: text;
                color: transparent;
            }

            .donut-center .small {
                font-size: 12px;
                color: var(--muted);
            }

        .list-legend {
            display: flex;
            flex-direction: column;
            gap: 10px;
            padding: 12px;
            border: 1px solid var(--border);
            border-radius: 10px;
            background: linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.01));
        }

        .legend-item {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 10px;
            padding: 8px 10px;
            border-radius: 8px;
            background: rgba(255,255,255,.02);
            border: 1px dashed var(--border);
        }

            .legend-item .left {
                display: flex;
                align-items: center;
                gap: 10px;
                color: var(--muted);
                font-size: 13px;
            }

        .swatch {
            width: 12px;
            height: 12px;
            border-radius: 3px;
        }

            .swatch.ok {
                background: #22c55e;
            }

            .swatch.warn {
                background: #f59e0b;
            }

            .swatch.err {
                background: #ef4444;
            }

        .legend-item .val {
            font-weight: 700;
        }

        /* 小工具类 */
        .row {
            display: flex;
            gap: 10px;
            align-items: center;
            flex-wrap: wrap;
        }

        .grow {
            flex: 1;
        }

        .muted {
            color: var(--muted);
        }

        .mono {
            font-variant-numeric: tabular-nums;
            font-feature-settings: "tnum";
        }
    </style>
</head>
<body>
    <div class="wrap">
        <header class="header">
            <div>
                <div class="title">芜湖市公共资源交易中心</div>
                <div class="subtitle">大屏看板 · 数据概览</div>
            </div>
            <div class="meta">
                <span class="badge">实时刷新</span>
                <span id="now"></span>
            </div>
        </header>

        <section class="grid">
            <!-- 左上：本周/今日/采购/工程 项目统计 -->
            <div class="card">
                <div class="card-header">
                    <div class="card-title">项目统计概览</div>
                    <div class="card-actions">

                    </div>
                </div>
                <div class="card-body">
                    <div class="kpi-wrap">
                        <div class="kpi-left">
                            <div class="kpi">
                                <div class="label">本周项目</div>
                                <div class="value mono" id="ThisWeeKNum">0</div>
                            </div>
                        </div>
                        <div class="kpi-right">
                            <div class="kpi">
                                <div class="label">今日项目</div>
                                <div class="value mono" id="TodayNum">0</div>
                            </div>
                            <div class="kpi">
                                <div class="label">采购项目</div>
                                <div class="value mono" id="PurchaseNum">0</div>
                            </div>
                            <div class="kpi">
                                <div class="label">工程项目</div>
                                <div class="value mono" id="EngineeringNum">0</div>
                            </div>
                            <div class="kpi">
                                <div class="label">席位项目</div>
                                <div class="value mono" id="SeatProjectNum">0</div>
                            </div>
                            <div class="kpi">
                                <div class="label">传统项目</div>
                                <div class="value mono" id="NoSeatProjectNum">0</div>
                            </div>
                            <div class="kpi">
                                <div class="label">主场双盲项目</div>
                                <div class="value mono" id="DoubleBlindNum">0</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 右上：项目列表（自动滚动） -->
            <div class="card">
                <div class="card-header">
                    <div class="card-title">今日项目情况</div>
                    <div class="card-actions muted">项目名称  / 开标状态/评标状态 / 开标时间/ 评标时间</div>
                </div>
                <div class="card-body">
                    <div class="scroll">
                        <div class="scroll-content">
                            <table class="table">
                                <thead>
                                    <tr>
                                        <th style="min-width:280px;">项目名称</th>
                                        <th>项目编号</th>
                                        <th>开标状态</th>
                                        <th>开标时间</th>
                                    </tr>
                                </thead>
                                <tbody id="projBody">
                                    <tr>
                                        <td>芜湖市政务服务平台升级改造（二期）</td>
                                        <td class="mono">WH-2025-0001</td>
                                        <td><span class="chip info">进行中</span></td>
                                        <td class="mono">2025-08-21 09:00</td>
                                    </tr>
                                    <tr>
                                        <td>湾沚区智慧校园网络设备采购</td>
                                        <td class="mono">WZ-2025-0319</td>
                                        <td><span class="chip ok">已结束</span></td>
                                        <td class="mono">2025-08-19 14:30</td>
                                    </tr>
                                    <tr>
                                        <td>鸠江区污水管网一期工程</td>
                                        <td class="mono">JJ-2025-0177</td>
                                        <td><span class="chip warn">待开标</span></td>
                                        <td class="mono">2025-08-23 10:00</td>
                                    </tr>
                                    <tr>
                                        <td>弋江区公共停车场智能收费系统</td>
                                        <td class="mono">YJ-2025-0242</td>
                                        <td><span class="chip info">进行中</span></td>
                                        <td class="mono">2025-08-22 09:30</td>
                                    </tr>
                                    <tr>
                                        <td>三山区山体公园绿化工程维护</td>
                                        <td class="mono">SS-2025-0058</td>
                                        <td><span class="chip ok">已结束</span></td>
                                        <td class="mono">2025-08-18 16:20</td>
                                    </tr>
                                    <tr>
                                        <td>繁昌区道路照明设备采购与安装</td>
                                        <td class="mono">FC-2025-0113</td>
                                        <td><span class="chip warn">待开标</span></td>
                                        <td class="mono">2025-08-24 09:00</td>
                                    </tr>
                                    <tr>
                                        <td>南陵县垃圾分类智能投放点建设</td>
                                        <td class="mono">NL-2025-0206</td>
                                        <td><span class="chip err">异常</span></td>
                                        <td class="mono">2025-08-20 11:15</td>
                                    </tr>
                                    <tr>
                                        <td>镜湖区老旧小区供水改造工程</td>
                                        <td class="mono">JH-2025-0295</td>
                                        <td><span class="chip info">进行中</span></td>
                                        <td class="mono">2025-08-21 15:00</td>
                                    </tr>
                                    <!-- 复制一份数据实现无缝滚动 -->
                                    <tr>
                                        <td>芜湖市政务服务平台升级改造（二期）</td>
                                        <td class="mono">WH-2025-0001</td>
                                        <td><span class="chip info">进行中</span></td>
                                        <td class="mono">2025-08-21 09:00</td>
                                    </tr>
                                    <tr>
                                        <td>湾沚区智慧校园网络设备采购</td>
                                        <td class="mono">WZ-2025-0319</td>
                                        <td><span class="chip ok">已结束</span></td>
                                        <td class="mono">2025-08-19 14:30</td>
                                    </tr>
                                    <tr>
                                        <td>鸠江区污水管网一期工程</td>
                                        <td class="mono">JJ-2025-0177</td>
                                        <td><span class="chip warn">待开标</span></td>
                                        <td class="mono">2025-08-23 10:00</td>
                                    </tr>
                                    <tr>
                                        <td>弋江区公共停车场智能收费系统</td>
                                        <td class="mono">YJ-2025-0242</td>
                                        <td><span class="chip info">进行中</span></td>
                                        <td class="mono">2025-08-22 09:30</td>
                                    </tr>
                                    <tr>
                                        <td>三山区山体公园绿化工程维护</td>
                                        <td class="mono">SS-2025-0058</td>
                                        <td><span class="chip ok">已结束</span></td>
                                        <td class="mono">2025-08-18 16:20</td>
                                    </tr>
                                    <tr>
                                        <td>繁昌区道路照明设备采购与安装</td>
                                        <td class="mono">FC-2025-0113</td>
                                        <td><span class="chip warn">待开标</span></td>
                                        <td class="mono">2025-08-24 09:00</td>
                                    </tr>
                                    <tr>
                                        <td>南陵县垃圾分类智能投放点建设</td>
                                        <td class="mono">NL-2025-0206</td>
                                        <td><span class="chip err">异常</span></td>
                                        <td class="mono">2025-08-20 11:15</td>
                                    </tr>
                                    <tr>
                                        <td>镜湖区老旧小区供水改造工程</td>
                                        <td class="mono">JH-2025-0295</td>
                                        <td><span class="chip info">进行中</span></td>
                                        <td class="mono">2025-08-21 15:00</td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>


            <div class="card">
                <div class="card-header">
                    <div class="card-title">场地分布情况</div>
                    <div class="row">
                        <div class="legend">
                            <!--<span><i class="dot blue"></i>传统评标室</span>
                            <span><i class="dot purple"></i>双盲工位</span>
                            <span><i class="dot teal"></i>独立评标室</span>-->
                        </div>
                    </div>
                </div>
                <div class="card-body">
                    <div class="scroll">
                        <table class="table venue-table">
                            <thead>
                                <tr>
                                    <th>类型</th>
                                    <th>总数</th>
                                    <th>市本级</th>
                                    <th>无为</th>
                                    <th>南陵</th>
                                    <th>湾沚</th>
                                    <th>繁昌</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td>传统评标室</td>
                                    <td class="mono">18</td>
                                    <td class="mono" id="WhTradition"></td>
                                    <td class="mono">0</td>
                                    <td class="mono">0</td>
                                    <td class="mono">0</td>
                                    <td class="mono">0</td>
                                </tr>
                                <tr>
                                    <td>双盲工位</td>
                                    <td class="mono">20</td>
                                    <td class="mono" id="WhDoubleBlind">0</td>
                                    <td class="mono" id="WwDoubleBlind">0</td>
                                    <td class="mono"  id="NLDoubleBlind">0</td>
                                    <td class="mono" >0</td>
                                    <td class="mono" >0</td>
                                </tr>
                                <tr>
                                    <td>独立评标室</td>
                                    <td class="mono">78</td>
                                    <td class="mono" id="Wh" >0</td>
                                    <td class="mono" id="Wuwei">0</td>
                                    <td class="mono" id="Nanling">0</td>
                                    <td class="mono" id="Wanzhi">0</td>
                                    <td class="mono" id="Fanchang">0</td>
                                </tr>

                            </tbody>
                        </table>
                    </div>
                </div>
            </div>

            <!-- 右下：专家签到占比（环形图 + 说明） -->
            <div class="card">
                <div class="card-title" style="color:#fff;">专家分布情况</div>

                <div style="display:flex; align-items:center; justify-content:space-between; gap:24px; height:100%; width:100%;">
                    <!-- 饼图容器：再大一圈 -->
                    <div id="pieChart" style="flex:1; width:calc(100% - 280px); height:100%;"></div>

                    <!-- 图例容器 -->
                    <div id="legendList" style="width:240px; display:flex; flex-direction:column; gap:12px;"></div>
                </div>
            </div>
        </section>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
    <script>
        // 顶部时间
        //function fmt(d) {
        //    const pad = n => String(n).padStart(2, '0');
        //    return d.getFullYear() + '-' + pad(d.getMonth() + 1) + '-' + pad(d.getDate())
        //        + ' ' + pad(d.getHours()) + ':' + pad(d.getMinutes()) + ':' + pad(d.getSeconds());
        //}

        //const nowEl = document.getElementById('now');
        //const updEl = document.getElementById('upd');

        //function tick() {
        //    const d = new Date();
        //    nowEl.textContent = '当前时间: ' + fmt(d);
        //    updEl.textContent = '更新时间: ' + fmt(new Date());
        //}

        // tick();
        //setInterval(tick, 1000);

        // 环形图数据联动（纯 CSS，通过自定义属性）
        //function setDonut(p1, p2, p3) {
        //    const donut = document.getElementById('donut');
        //    donut.style.setProperty('--p1', p1);
        //    donut.style.setProperty('--p2', p2);
        //    donut.style.setProperty('--p3', p3);
        //    document.getElementById('donutPct').textContent = p1 + '%';
        //    document.getElementById('v-ok').textContent = p1;
        //    document.getElementById('v-warn').textContent = p2;
        //    document.getElementById('v-err').textContent = p3;
        //}
        //// 示例：保留初始 46/34/20 不动
        //setDonut(46, 34, 20);

        //// KPI 随机刷新示例
        //const rand = (min, max) => Math.floor(Math.random() * (max - min + 1)) + min;
        //document.getElementById('randKpi').addEventListener('click', () => {
        //    const w = rand(110, 160);
        //    const t = rand(18, 38);
        //    const p = rand(50, 90);
        //    const c = Math.max(0, w - p);

        //    document.querySelector('[data-kpi="week"]').textContent = w;
        //    document.querySelector('[data-kpi="today"]').textContent = t;
        //    document.querySelector('[data-kpi="purchase"]').textContent = p;
        //    document.querySelector('[data-kpi="construction"]').textContent = c;
        //});

        //// 鼠标悬停时暂停滚动
        //const scrollContent = document.querySelector('.scroll-content');
        //const scrollContainer = scrollContent.parentElement;

        //scrollContainer.addEventListener('mouseenter', () => {
        //    scrollContent.style.animationPlayState = 'paused';
        //});

        //scrollContainer.addEventListener('mouseleave', () => {
        //    scrollContent.style.animationPlayState = 'running';
        //});

        document.addEventListener("DOMContentLoaded", function () {
            fetch("/api/Daping/GetProjectStatistics")
                .then(response => response.json())
                .then(data => {
                    document.getElementById('ThisWeeKNum').innerText = data.Data["ThisWeeKNum"];
                    document.getElementById('TodayNum').innerText = data.Data["TodayNum"];
                    document.getElementById('PurchaseNum').innerText = data.Data["PurchaseNum"];
                    document.getElementById('EngineeringNum').innerText = data.Data["EngineeringNum"];
                    document.getElementById('SeatProjectNum').innerText = data.Data["SeatProjectNum"];
                    document.getElementById('NoSeatProjectNum').innerText = data.Data["NoSeatProjectNum"];
                })
                .catch(err => {
                    console.error("获取统计数据失败:", err);
                });
        });


        document.addEventListener("DOMContentLoaded", function () {
            fetch("/api/Daping/GetE")
                .then(response => response.json())
                .then(data => {
                    document.getElementById('WhTradition').innerText = data.Data["WhTradition"];
                    document.getElementById('NLDoubleBlind').innerText = data.Data["NLDoubleBlind"];
                    document.getElementById('WwDoubleBlind').innerText = data.Data["WwDoubleBlind"];
                    document.getElementById('WhDoubleBlind').innerText = data.Data["WhDoubleBlind"];
                    document.getElementById('Wh').innerText = data.Data["Wh"];
                    document.getElementById('Wuwei').innerText = data.Data["Wuwei"];
                    document.getElementById('Nanling').innerText = data.Data["Nanling"];

                    document.getElementById('Fanchang').innerText = data.Data["Fanchang"];
                    document.getElementById('Wanzhi').innerText = data.Data["Wanzhi"];
                })
                .catch(err => {
                    console.error("获取统计数据失败:", err);
                });
        });





        document.addEventListener("DOMContentLoaded", function () {
            const tbody = document.getElementById("projBody");

            fetch("/api/Daping/GetTodayProjectInfo") // 替换成你的实际接口
                .then(response => response.json())
                .then(data => {
                    tbody.innerHTML = ""; // 先清空表格
                    data.Data.forEach(item => {
                        const tr = document.createElement("tr");

                        // 项目名称
                        const tdName = document.createElement("td");
                        tdName.textContent = item.ProjectName;
                        tr.appendChild(tdName);

                        // 项目编号
                        const tdNo = document.createElement("td");
                        tdNo.textContent = item.ProjectNo;
                        tdNo.className = "mono";
                        // tr.appendChild(tdNo);

                        // 开标状态
                        const tdKbStatus = document.createElement("td");
                        const spanKb = document.createElement("span");
                        spanKb.className = `chip ${getStatusClass(item.KbStatus)}`;
                        spanKb.textContent = item.KbStatus;
                        tdKbStatus.appendChild(spanKb);
                        tr.appendChild(tdKbStatus);
                        // 评标状态
                        const tdPbStatus = document.createElement("td");
                        const spanPb = document.createElement("span");
                        spanPb.className = `chip ${getStatusClass(item.PbStatus)}`;
                        spanPb.textContent = item.PbStatus;
                        tdPbStatus.appendChild(spanPb);
                        tr.appendChild(tdPbStatus);

                        // 开标时间
                        const tdKbTime = document.createElement("td");
                        tdKbTime.textContent = formatDateTime(item.KbTime);
                        tdKbTime.className = "mono";
                        tr.appendChild(tdKbTime);



                        // 评标时间
                        const tdPbTime = document.createElement("td");
                        tdPbTime.textContent = formatDateTime(item.PbTime);
                        tdPbTime.className = "mono";
                        tr.appendChild(tdPbTime);

                        tbody.appendChild(tr);
                    });
                })
                .catch(err => {
                    console.error("获取项目列表失败:", err);
                });

            // 状态对应样式
            function getStatusClass(status) {
                switch (status) {
                    case "进行中": return "info";
                    case "已结束": return "ok";
                    case "待开标": return "warn";
                    case "异常": return "err";
                    default: return "";
                }
            }

            // 格式化时间
            function formatDateTime(dateStr) {
                if (!dateStr) return "";
                const d = new Date(dateStr);
                return `${d.getFullYear()}-${(d.getMonth() + 1).toString().padStart(2, '0')}-${d.getDate().toString().padStart(2, '0')} ${d.getHours().toString().padStart(2, '0')}:${d.getMinutes().toString().padStart(2, '0')}`;
            }
        });







        let data = [
            { name: '芜湖', value: 30, color: '#5470c6' },
            { name: '无为', value: 20, color: '#91cc75' },
            { name: '繁昌', value: 15, color: '#fac858' },
            { name: '湾沚', value: 20, color: '#ee6666' },
            { name: '南陵', value: 5, color: '#73c0de' }
        ];

        /* ---------- 1. 饼图 ---------- */
        const chart = echarts.init(document.getElementById('pieChart'));
        const option = {
            backgroundColor: 'transparent',
            tooltip: {
                trigger: 'item',
                formatter: '{b}: {c} ({d}%)',
                backgroundColor: 'rgba(0,0,0,.75)',
                borderWidth: 0,
                textStyle: { color: '#ffffff' }
            },
            series: [{
                type: 'pie',
                radius: '78%',
                center: ['56%', '50%'],      // 进一步右移，给左侧标签更大空间
                minShowLabelAngle: 0,
                avoidLabelOverlap: false,
                labelLayout: { moveOverlap: 'shiftY', hideOverlap: false },
                label: {
                    show: true,
                    position: 'outside',
                    alignTo: 'edge',
                    edgeDistance: 10,
                    formatter: '{name|{b}}\n{percent|{d}%}',
                    lineHeight: 16,
                    rich: {
                        name: { width: 120, color: '#fff', fontSize: 13, lineHeight: 16, overflow: 'breakAll' },
                        percent: { color: '#fff', fontSize: 13, fontWeight: 'bold', lineHeight: 16 }
                    }
                },
                labelLine: {
                    show: true,
                    length: 14,
                    length2: 20,
                    smooth: 0.3,
                    lineStyle: { color: '#fff' }
                },
                data: data.map(item => ({
                    name: item.name,
                    value: item.value,
                    itemStyle: {
                        color: item.color,        // 先用纯色，避免 8位十六进制透明度在旧浏览器不兼容
                        borderColor: '#fff',
                        borderWidth: 2
                    }
                })),
                emphasis: {
                    scaleSize: 10,
                    itemStyle: { shadowBlur: 20, shadowColor: 'rgba(255,255,255,.5)' }
                }
            }]
        };
        chart.setOption(option);

        /* ---------- 2. 自定义图例 ---------- */
        const legendContainer = document.getElementById('legendList');
        function renderLegend(list) {
            legendContainer.innerHTML = '';
            list.forEach(item => {
                const row = document.createElement('div');
                row.style.cssText = `
        display:flex; align-items:center; justify-content:space-between;
        width:150px; padding:6px 12px; border-radius:8px;
        cursor:pointer; transition:.2s;
      `;
                row.onmouseenter = () => {
                    row.style.background = 'rgba(255,255,255,.15)';
                    chart.dispatchAction({ type: 'highlight', name: item.name });
                };
                row.onmouseleave = () => {
                    row.style.background = 'transparent';
                    chart.dispatchAction({ type: 'downplay', name: item.name });
                };

                const left = document.createElement('div');
                left.style.cssText = 'display:flex; align-items:center; gap:8px;';

                const swatch = document.createElement('span');
                swatch.style.cssText = `
        width:14px; height:14px; border-radius:50%;
        background:${item.color}; box-shadow:0 0 4px rgba(0,0,0,.25);
      `;

                const nameSpan = document.createElement('span');
                nameSpan.textContent = item.name;
                nameSpan.style.cssText = 'font-size:14px; color:#ffffff;';

                left.appendChild(swatch);
                left.appendChild(nameSpan);

                const valueSpan = document.createElement('span');
                valueSpan.textContent = item.value;
                valueSpan.style.cssText = 'font-weight:bold; font-size:14px; color:#ffffff;';

                row.appendChild(left);
                row.appendChild(valueSpan);
                legendContainer.appendChild(row);
            });
        }
        renderLegend(data);

        // 动态拉取专家分布数据并更新图表/图例
        function mapExpertDistributionToData(dto) {
            const safeNum = v => Number.isFinite(Number(v)) ? Number(v) : 0;
            return [
                { name: '芜湖', value: safeNum(dto && dto.WhNum), color: '#5470c6' },
                { name: '无为', value: safeNum(dto && dto.WuweiNum), color: '#91cc75' },
                { name: '繁昌', value: safeNum(dto && dto.FanchangNum), color: '#fac858' },
                { name: '湾沚', value: safeNum(dto && dto.WanzhiNum), color: '#ee6666' },
                { name: '南陵', value: safeNum(dto && dto.NanlingNum), color: '#73c0de' }
            ];
        }

        function updateChartWithData(list) {
            chart.setOption({
                series: [{
                    data: list.map(item => ({
                        name: item.name,
                        value: item.value,
                        itemStyle: { color: item.color, borderColor: '#fff', borderWidth: 2 }
                    }))
                }]
            });
        }

        document.addEventListener('DOMContentLoaded', function () {
            try { chart.showLoading('default', { text: '加载中...' }); } catch (_) { }
            fetch('/api/Daping/GetExpertDistribution')
                .then(r => r.json())
                .then(res => {
                    const dto = res.Data;
                    const remoteData = mapExpertDistributionToData(dto);
                    data = remoteData;
                    updateChartWithData(remoteData);
                    renderLegend(remoteData);
                })
                .catch(err => {
                    console.error('获取专家分布失败:', err);
                })
                .finally(() => {
                    try { chart.hideLoading(); } catch (_) { }
                });
        });

        // 每2分钟自动刷新页面（120000ms）
        if (window.__autoReloadTimer) clearInterval(window.__autoReloadTimer);
        window.__autoReloadTimer = setInterval(function () {
            // 建议普通刷新，参数在现代浏览器中已被忽略
            window.location.reload();
        }, 120000);

    </script>








        // 每2分钟自动刷新一次页面（120000ms）
        (function setupAutoReload(){
            try {
                if (window.__autoReloadTimer) clearInterval(window.__autoReloadTimer);
                window.__autoReloadTimer = setInterval(function(){
                    // 优先用硬刷新，避免缓存；如浏览器不支持参数则回退普通刷新
                    if (typeof window.location.reload === 'function') {
                        try { window.location.reload(true); } catch(e) { window.location.reload(); }
                    } else {
                        window.location.href = window.location.href;
                    }
                }, 120000);
            } catch (e) { /* ignore */ }
        })();
    </script>
</body>
</html>